<template>
  <div class="l-query">
    <div class="query-head">
      <div style="display: flex; align-items: center">
        <el-form :model="formRef" label-width="70px" style="display: flex">
          <el-form-item
            :label="item.label"
            style="margin-right: 20px; margin-bottom: 0px"
            v-for="item in query.slice(0, 2)"
            :key="item.prop">
            <!-- 这里只获取前两个筛选条件 -->
            <el-input
              v-model="item.prop"
              :placeholder="'输入' + item.label + '关键字'"
              clearable
              v-if="item.type == 'text'"></el-input>
            <el-select-v2
              v-model="item.prop"
              :options="item.options!"
              clearable
              :placeholder="'选择' + item.label + '关键字'"
              v-else-if="item.type == 'select'" />
            <el-date-picker
              v-model="item.prop"
              clearable
              type="datetimerange"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              v-else-if="item.type == 'date'" />
          </el-form-item>
        </el-form>
        <el-button
          @click="isOpen = !isOpen"
          v-if="!isOpen"
          :disabled="query?.length == 2"
          :icon="ArrowDownBold"
          circle></el-button>
        <el-button
          @click="isOpen = !isOpen"
          v-else
          :icon="ArrowUpBold"
          circle></el-button>
        <el-button type="primary" plain>查询</el-button>
        <el-button>重置</el-button>
      </div>
      <div>
        <slot name="event"></slot>
      </div>
    </div>
    <!-- 这里做的是一个类似于折叠面板的功能 -->
    <div class="query-content" :class="isOpen ? 'is-open' : ''">
      <el-form
        :model="formRef"
        label-width="70px"
        style="display: flex; flex-wrap: wrap">
        <el-form-item
          :label="item.label"
          style="margin-right: 20px; margin-bottom: 0px"
          v-for="item in query?.slice(2)"
          :key="item.prop">
          <!-- 这里获取除前两个以外所有的筛选条件 -->
          <el-input
            v-model="item.prop"
            :placeholder="'输入' + item.label + '关键字'"
            clearable
            v-if="item.type == 'text'"></el-input>
          <el-select-v2
            v-model="item.prop"
            :options="item.options!"
            clearable
            :placeholder="'选择' + item.label + '关键字'"
            v-else-if="item.type == 'select'" />
          <el-date-picker
            v-model="item.prop"
            clearable
            type="datetimerange"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="x"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            v-else-if="item.type == 'date'" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from "vue";
  import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
  import type { FormInstance } from "element-plus";
  import { queryData, IqueryData } from "../table";

  const query = reactive<IqueryData[]>(queryData.slice());

  const isOpen = ref<boolean>(true);
  const formRef = ref<FormInstance>();
  //   onMounted(() => {
  //     query.values = queryData.slice();
  //   });
</script>

<style scoped lang="scss">
  .l-query {
    margin-bottom: 10px;
    overflow: hidden;

    .query-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .query-content {
      width: 100%;
      max-height: 0px;
      transition: all 0.8s;
    }

    .is-open {
      padding: 10px 0;
      max-height: 200px;
    }
  }

  :deep(.el-form-item__label) {
    font-weight: bold;
  }

  .el-input {
    width: 200px;
  }

  .el-select-v2 {
    width: 200px;
  }

  :deep(.el-date-editor) {
    width: 380px !important;
  }
</style>
